<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审批管理</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"/>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <style>
        .switch-btn{
            width: 45px;
            height: 25px;
            position: relative;
            top: 1px;
        }
        .hidden-checkbox,
        .switch-area,
        .switch-toggle{
            position: absolute;
            top: 0;
            left: 55px;
        }
        .hidden-checkbox{
            width: 45px;
            height: 25px;
            opacity: 0;
            z-index: 10;
            cursor: pointer;
        }
        .switch-area{
            width: 100%;
            height: 100%;
            border-radius: 25px;
            background-color: #B3B3B3;
        }
        .switch-toggle{
            width: 25px;
            height: 25px;
            border: 1px solid #B3B3B3;
            border-radius: 50%;
            background-color: #fff;
        }
        /*核心代码*/
          .hidden-checkbox:checked ~ .switch-area{
              background-color: #4084F1;
          }
        .hidden-checkbox:checked ~ .switch-toggle{
            border: 1px solid #4084F1;
            left: 75px;
        }
        .switch-area,
        .switch-toggle{
            -webkit-transition: All 0.3s ease;
            -moz-transition: All 0.3s ease;
            -o-transition: All 0.3s ease;
            transition: All 0.3s ease;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <ol class="breadcrumb nav-top">
        <li><a th:href="@{~/router/index.html}" >首页</a></li>
        <li class="active">查看成绩</li>
    </ol>

    <!--<button id="sq" class="btn btn-primary">请假</button>-->
    <table class="table table-striped tb">
        <thead>
        <tr class="text-center">
            <td>请假人</td>
            <td>请假原因</td>
            <td>请假时间</td>
            <td>请假天数</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr class="text-center" th:each="leave : ${leavesList}">
            <!--<input type="hidden" id="leid" th:value="${leave.leid}"/>-->
            <input type="hidden" class="state" th:value="${leave.lestate}">
            <td th:text="${leave.stuName}"></td>
            <td th:text="${leave.lebecause}"></td>
            <td th:text="${#dates.format(leave.letime,'yyyy-MM-dd')}"></td>
            <td th:text="${leave.ledays+' 天'}"></td>
            <td>
                <div class="switch-btn">
                    <input type="checkbox" th:onclick="updateState([[${leave.leid}]])" id="checkApprove" th:checked="1 == ${leave.lestate}" class="hidden-checkbox" name="" value="">
                    <span class="switch-area"></span>
                    <span class="switch-toggle"></span>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
    <script>
        var sta = 0;
        function updateState(leid){
            sta = sta==0?1:0;
            console.log("sta-> "+sta)
            $.ajax({
                url:"/leave/instructorApproved",
                data:{"leid":leid,"sta":sta},
                success:function(data){
                    if(data=='success'){

                    }
                }
            })
        }
        $(function(){
            $(".state").each(function(){
                console.log("state: "+$(this).val())
                var state = $(this).val();
                var c = $(this).siblings().last().children().last();
                console.log(c)
                // if(state==1){
                //     $(".switch-toggle").css({"border":"1px solid #4084F1","left":"75px"})
                // }
                //  state==1?$(this).siblings().last().children().last().css({"left":"55px"}):null;
            })

            // if(state==1){
            //     $(".switch-toggle").css({"border":"1px solid #4084F1","left":"75px"})
            // }
        })
    </script>
</body>
</html>